<template>
  <ul class="tab-bar">
    <li
     is="router-link"
     tag="li"
     v-for= "nav in navs"
      :key= "nav.path"
      :to = "nav.path"
    >
    <i class="iconfont" v-html="nav.icon"></i>
    <span>{{ nav.title }}</span>
    </li>
  </ul>
</template>
<script>
import routes from '@/router/routes'
export default {
  name: 'TabBar',
  computed: {
    navs() {
      return (
        routes
          .filter(route => route.meta.inTabBar)
          .map(({ path, meta: { title, icon, replace } }) => ({
            path,
            title,
            icon,
            replace,
          }))
      )
    },
  },
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 2890313 */
  src: url('http://at.alicdn.com/t/font_2890313_8pqdyd728gn.woff2?t=1635145785781') format('woff2'),
       url('http://at.alicdn.com/t/font_2890313_8pqdyd728gn.woff?t=1635145785781') format('woff'),
       url('http://at.alicdn.com/t/font_2890313_8pqdyd728gn.ttf?t=1635145785781') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:20px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
.tab-bar {
    display: flex;
    height: 64px;
    border-top: 1px solid #ccc;
    li{
      display: flex;
      flex: 1;
      flex-direction: column;
      text-align: center;
      justify-content: space-around;
      span {
        font-size: 14px;
      }
      }
    }
    .router-link-exact-active, .router-link-active {
      color: #d81e06;
    }
</style>
